<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客户详情 - 王氏美容汽车集团管理系统</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    
    <style>
        .info-card {
            border: none;
            border-radius: 15px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .avatar-circle {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 2rem;
            font-weight: bold;
        }
        .member-badge {
            font-size: 1rem;
            padding: 0.5rem 1rem;
        }
        .stat-item {
            text-align: center;
            padding: 1rem;
            border-radius: 10px;
            background: #f8f9fa;
            margin-bottom: 1rem;
        }
        .stat-value {
            font-size: 1.5rem;
            font-weight: bold;
            color: #495057;
        }
        .stat-label {
            color: #6c757d;
            font-size: 0.9rem;
        }
    </style>
</head>
<body class="bg-light">
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container-fluid">
            <a class="navbar-brand" href="/">
                <i class="fas fa-car me-2"></i>王氏美容汽车集团
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/dashboard">
                            <i class="fas fa-tachometer-alt me-1"></i>仪表盘
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/customers">
                            <i class="fas fa-users me-1"></i>客户管理
                        </a>
                    </li>
                </ul>
                <ul class="navbar-nav">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
                            <i class="fas fa-user me-1"></i>管理员
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="/profile">个人资料</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="/logout">退出登录</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container-fluid mt-4">
        <!-- 页面标题和操作按钮 -->
        <div class="row mb-4">
            <div class="col">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="/dashboard">首页</a></li>
                        <li class="breadcrumb-item"><a href="/customers">客户管理</a></li>
                        <li class="breadcrumb-item active">客户详情</li>
                    </ol>
                </nav>
                <h2><i class="fas fa-user me-2"></i>客户详情</h2>
            </div>
            <div class="col-auto">
                <a th:href="@{/customers/{id}/edit(id=${customer.id})}" class="btn btn-primary">
                    <i class="fas fa-edit me-2"></i>编辑客户
                </a>
                <a href="/customers" class="btn btn-outline-secondary">
                    <i class="fas fa-arrow-left me-2"></i>返回列表
                </a>
            </div>
        </div>

        <div class="row">
            <!-- 基本信息 -->
            <div class="col-lg-4 mb-4">
                <div class="card info-card">
                    <div class="card-body text-center">
                        <div class="avatar-circle mx-auto mb-3" th:text="${#strings.substring(customer.name, 0, 1)}">张</div>
                        <h4 th:text="${customer.name}">张三</h4>
                        <span class="badge member-badge"
                              th:classappend="${customer.memberLevel == 'VIP会员'} ? 'bg-danger' : 
                                             (${customer.memberLevel == '金卡会员'} ? 'bg-warning' : 
                                             (${customer.memberLevel == '银卡会员'} ? 'bg-info' : 'bg-secondary'))"
                              th:text="${customer.memberLevel}">普通会员</span>
                        
                        <div class="row mt-4">
                            <div class="col-6">
                                <div class="stat-item">
                                    <div class="stat-value text-success">¥<span th:text="${#numbers.formatDecimal(customer.balance, 0, 2)}">0.00</span></div>
                                    <div class="stat-label">账户余额</div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="stat-item">
                                    <div class="stat-value text-warning" th:text="${customer.points}">0</div>
                                    <div class="stat-label">积分余额</div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="stat-item">
                                    <div class="stat-value text-info">¥<span th:text="${#numbers.formatDecimal(customer.totalConsumption ?: 0, 0, 2)}">0.00</span></div>
                                    <div class="stat-label">累计消费</div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="stat-item">
                                    <div class="stat-value text-primary" th:text="${customer.visitCount ?: 0}">0</div>
                                    <div class="stat-label">到店次数</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 详细信息 -->
            <div class="col-lg-8 mb-4">
                <div class="card info-card">
                    <div class="card-header bg-white">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-info-circle me-2"></i>详细信息
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label text-muted">会员卡号</label>
                                <p class="form-control-plaintext" th:text="${customer.cardNo}">CB202412010001</p>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label text-muted">手机号码</label>
                                <p class="form-control-plaintext" th:text="${customer.phone}">13800138001</p>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label text-muted">性别</label>
                                <p class="form-control-plaintext" th:text="${customer.gender}">男</p>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label text-muted">生日</label>
                                <p class="form-control-plaintext" th:text="${customer.birthday != null ? #temporals.format(customer.birthday, 'yyyy-MM-dd') : '未设置'}">1990-01-01</p>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label text-muted">车牌号码</label>
                                <p class="form-control-plaintext" th:text="${customer.carNumber}">京A12345</p>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label text-muted">车辆品牌</label>
                                <p class="form-control-plaintext" th:text="${customer.carBrand}">奔驰</p>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label text-muted">车辆型号</label>
                                <p class="form-control-plaintext" th:text="${customer.carModel ?: '未设置'}">C200L</p>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label text-muted">车辆颜色</label>
                                <p class="form-control-plaintext" th:text="${customer.carColor}">白色</p>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label text-muted">客户来源</label>
                                <p class="form-control-plaintext" th:text="${customer.customerSource}">朋友介绍</p>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label text-muted">注册时间</label>
                                <p class="form-control-plaintext" th:text="${#temporals.format(customer.createdAt, 'yyyy-MM-dd HH:mm')}">2024-01-01 10:00</p>
                            </div>
                            <div class="col-12 mb-3">
                                <label class="form-label text-muted">备注信息</label>
                                <p class="form-control-plaintext" th:text="${customer.remarks ?: '无'}">无</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 消费记录 -->
        <div class="row">
            <div class="col-12">
                <div class="card info-card">
                    <div class="card-header bg-white">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-history me-2"></i>消费记录
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="alert alert-info" role="alert">
                            <i class="fas fa-info-circle me-2"></i>
                            消费记录功能正在开发中，敬请期待！
                        </div>
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead class="table-light">
                                    <tr>
                                        <th>消费时间</th>
                                        <th>服务项目</th>
                                        <th>消费金额</th>
                                        <th>支付方式</th>
                                        <th>服务人员</th>
                                        <th>状态</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td colspan="6" class="text-center text-muted py-4">
                                            <i class="fas fa-inbox fa-3x mb-3"></i>
                                            <p>暂无消费记录</p>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 充值记录 -->
        <div class="row mt-4">
            <div class="col-12">
                <div class="card info-card">
                    <div class="card-header bg-white">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-credit-card me-2"></i>充值记录
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="alert alert-info" role="alert">
                            <i class="fas fa-info-circle me-2"></i>
                            充值记录功能正在开发中，敬请期待！
                        </div>
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead class="table-light">
                                    <tr>
                                        <th>充值时间</th>
                                        <th>充值金额</th>
                                        <th>赠送金额</th>
                                        <th>支付方式</th>
                                        <th>操作人员</th>
                                        <th>状态</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td colspan="6" class="text-center text-muted py-4">
                                            <i class="fas fa-inbox fa-3x mb-3"></i>
                                            <p>暂无充值记录</p>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
